<script setup>

defineProps({
  loading: {
    type: Boolean,
    default: () => false
  },
  contentList: Array,
  total:{
    type:Number,
    default: () => 10
  }
})
// 获取父组件方法
const emits = defineEmits(["pageChange"])
// 当前页改变, 调用父组件方法
const pageChange = (num) => {
  emits('pageChange', num)
}

</script>

<template>
  <el-skeleton
    animated
    :count="10"
    :loading="loading"
  >
    <template #template>
      <div class="transition-opacity duration-500 flex flex-col bg-white shadow-md shadow-gray-300 px-8 py-10 mb-4 ">
        <div class="mx-auto w-1/2">
          <el-skeleton-item
            variant="h1"
            style="height: 2rem;"
          />
        </div>
        <div class="center py-2 w-3/4 mx-auto">
          <el-skeleton-item variant="h1" />
        </div>
        <div class="pt-5 ">
          <el-skeleton-item
            variant="h1"
            style="height: 1.3rem;"
          />
          <el-skeleton-item
            variant="h1"
            style="height: 1.3rem;"
          />
          <el-skeleton-item
            variant="h1"
            style="height: 1.3rem;"
          />
        </div>
        <div class="pt-10 w-1/6 mx-auto">
          <el-skeleton-item
            variant="h1"
            style="height: 2rem;"
          />
        </div>
      </div>
    </template>
    <template #default>
      <div class="transition-opacity delay-200 duration-200">
        <div v-for="content in contentList">
          <Content :content="content"></Content>
        </div>
        <div class="bg-white py-1 flex items-center justify-center">
          <el-pagination
            :page-size="10"
            layout="prev, pager, next"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
        <div>
          <Footer></Footer>
        </div>
      </div>
    </template>
  </el-skeleton>
</template>

<style
  scoped
  lang='scss'
></style>